import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
// import { Button } from 'antd-mobile'
import SettlementRecordVM from 'cvm/record/settlementRecord'
import './settlementRecord.less'

const SettlementRecordList = observer(({ vm }) => {
  return (
    <div className='settlement-record'>
      {/* <div className='flex-wrap common-box'>
        <div className='flex-3'>
          <p className='title'>六月使用时长-500天</p>
          <p className='tips'>北京顺达<span className='get-money'>1590.00</span>么几家家装有<span className='deduction-money'>1590.00</span>限公司</p>
        </div>
        <div className='flex-2'>
          <p className='money'>￥1480.00</p>
          <p className='time'>2108.12.12 12:26</p>
        </div>
      </div> */}
      {
        vm.settlementRecordDetail.length > 0 ? vm.settlementRecordDetail.map((item, index) => {
          return (
            <div key={index}>
              {
                item.CompanyName === '' || item.CompanyName === null ? <div className='flex-wrap common-box'>
                  <div className='flex-3'>
                    <p className='title'>{item.Name}</p>
                    <p className='tips'>
                      应结算<span className='get-money'>{item.Total.toFixed(2)}</span>元
                        投诉扣除<span className='deduction-money'>{item.Deduct.toFixed(2)}</span>元</p>
                  </div>
                  <div className='flex-2'>
                    <p className='money'>￥{item.Operate === 4 ? (item.RealTotal).toFixed(2) : (item.Bonus * item.Total).toFixed(2)}</p>
                    <p className='time'>{item.CreatedTimeStr}</p>
                  </div>
                </div> : <div className='flex-wrap common-box' key={index}>
                  <div className='flex-3'>
                    <p className='title'>{item.Name}</p>
                    <p className='tips'>{item.CompanyName}</p>
                  </div>
                  <div className='flex-2'>
                    <p className='money'>￥{(item.Total * item.Bonus).toFixed(2)}</p>
                    <p className='time'>{item.CreatedTimeStr}</p>
                  </div>
                </div>
              }
            </div>
          )
        }) : vm.record && <div className='none-record'>
          <img src={require('../../images/none-tixian.png')} />
          <p>暂无结算记录</p>
        </div>
      }
    </div>
  )
})

@observer
class settlementRecord extends Component {
  constructor (props) {
    super(props)
    window.document.title = '结算记录'
    this.vm = new SettlementRecordVM(props)
  }
  render () {
    return (
      <div>
        <SettlementRecordList vm={this.vm} />
      </div>
    )
  }
}

export default settlementRecord
